<!-- 
  千万不要选项式api和组合式api混合来用，会有奇怪的bug出现
  组合式中，素有的业务代码都写在 setup 中即可

  因为生命周期、computed，watch，ref等都不会被覆盖，所以如果有多个业务，就可以写多个业务对应的生命周期函数即可
 -->
<script setup>
import { onBeforeUnmount, onMounted } from 'vue';

const h1Dom = document.querySelector('h1');
console.log('setup生命周期', h1Dom);
onMounted(() => {
  const h1Dom = document.querySelector('h1');
  console.log('onMounted生命周期 -----> ', h1Dom);
});

onMounted(() => {
  console.log('onMounted');
});

onBeforeUnmount(() => {
  console.log('onBeforeUnmount -----> ');
});
</script>

<template>
  <h1>Hello vue3</h1>
</template>
